<template>
  <!-- <div class="card">
    <echarts-view ref="echarts" :options="option" height="100%"></echarts-view>
    <div class="button-group">
      <a-button type="primary" block @click="handleChooseArea('经开区')">经开区</a-button>
      <a-button type="primary" block @click="handleChooseArea('双龙区')">双龙区</a-button>
      <a-button type="primary" block @click="handleChooseArea('高新区')">高新区</a-button>
    </div>
    <y-button
      type="primary"
      style="position: absolute; right: 0; bottom: 10px;background: transparent;"
      v-if="isArea"
      @click="handleBack"
    >返回</y-button>
  </div> -->
  <div id="map" class="card"></div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'
import VueCountUp from 'vue-countupjs'
import headerTitle from './headerTitle.vue'
import { echartsView } from '@/components'
import * as echarts from 'echarts'
// import 'echarts-gl'
import jsonData from '@/assets/Json/guiyangMap.json'
export default {
  components: {
    headerTitle,
    echartsView,
    VueCountUp
  },
  data () {
    return {
      option: {
        visualMap: { // 左下角选峰值的小插件(视觉映射组件)
          show: false, // 是否显示视觉映射组件
          min: 0, // 最小值
          max: 100, // 最大值
          text: ['最大值', '最小值'], // 上下两端的文本内容
          textStyle: {
            color: '#fff' // 文字的颜色
          },
          realtime: false, // 拖拽时，是否实时更新
          calculable: true, // 是否显示拖拽用的手柄
          inRange: {
            // color: ['#00bbf2', '#f59557', '#f86505'] // 图元的颜色 - 注：使用颜色梯度时启用
          }
        },
        tooltip: { // 鼠标移入后展示数据
          show: false
        },
        geo: {
          center: undefined,
          zoom: 1.3,
          layoutCenter: ['50%', '50%'],
          layoutSize: '100%',
          map: 'gy',
          show: true,
          animationDurationUpdate: 0,
          label: {
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            normal: {
              areaColor: '#091632',
              borderColor: '#1773c3',
              shadowColor: '#1773c3',
              shadowBlur: 20
            }
          },
          emphasis: {
            disabled: true
          }
        },
        series: [ // 地图参数
          {
            type: 'map', // 地图类型
            zoom: 1.3, // 缩放比例
            map: 'gy', // 对应 registerMap 中的 mapName 名称
            layoutCenter: ['50%', '50%'], // 地图中心在屏幕中的位置
            layoutSize: '95%', // 地图的大小(支持相对于屏幕宽高的百分比或者绝对的像素大小)
            label: { // 图形上的文本标签
              show: true, // 显示文本标签
              color: '#fff', // 字体颜色
              fontSize: 20
            },
            itemStyle: {
              // 鼠标移入前的样式
              borderColor: '#216ead',
              borderWidth: 1,
              shadowColor: '#216ead',
              shadowOffsetX: -2,
              shadowOffsetY: 2,
              shadowBlur: 10,
              color: '#113f7d', // 地图区域的颜色(背景颜色)
              label: { // 图形上的文本标签
                show: true, // 显示文本标签
                color: '#fff' // 字体颜色
              },
              emphasis: { // 鼠标移入后的样式
                borderWidth: 2, // 图形的描边线宽
                borderColor: '#fff', // 图形的描边颜色
                areaColor: '#16f5ff', // 地图区域的颜色(背景颜色) none.无样式
                label: { // 图形上的文本标签
                  show: true, // 显示文本标签
                  color: '#fff' // 字体颜色
                }
              }
            },
            select: { // 地图选中区域样式
              itemStyle: {
                borderWidth: 2, // 图形的描边线宽
                borderColor: '#3bb3ff', // 图形的描边颜色
                areaColor: '#1083e2' // 地图区域的颜色(背景颜色)
              },
              label: { // 图形上的文本标签
                show: true, // 显示文本标签
                color: '#fff' // 字体颜色
              }
            },
            // 数据内容数组
            data: [
              { name: '南明区', value: 2 },
              { name: '云岩区', value: 3 },
              { name: '观山湖区', value: 8 },
              { name: '乌当区', value: 9 },
              { name: '花溪区', value: 10 },
              { name: '白云区', value: 11 },
              { name: '高新区', value: 12 },
              { name: '经开区', value: 13 },
              { name: '双龙区', value: 172 },
              // 没有三县一区
              { name: '息烽县', itemStyle: { color: 'transparent' }, emphasis: { disabled: true }, select: { disabled: true } },
              { name: '修文县', itemStyle: { color: 'transparent' }, emphasis: { disabled: true }, select: { disabled: true } },
              { name: '开阳县', itemStyle: { color: 'transparent' }, emphasis: { disabled: true }, select: { disabled: true } },
              { name: '清镇市', itemStyle: { color: 'transparent' }, emphasis: { disabled: true }, select: { disabled: true } }
            ]
          }
        ]
      },
      isArea: false,
      area: [
        { name: '南明区', value: 2 },
        { name: '云岩区', value: 3 },
        { name: '观山湖区', value: 8 },
        { name: '乌当区', value: 9 },
        { name: '花溪区', value: 10 },
        { name: '白云区', value: 11 },
        { name: '高新区', value: 12 },
        { name: '经开区', value: 13 },
        { name: '双龙区', value: 172 }
      ]
    }
  },
  mounted () {
    this.ininChart()
  },
  methods: {
    init () {
      AMapLoader.load({
        key: 'f0bfbfac6d986ff63a4fc40e21c3412d', // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        AMapUI: {
          version: '1.1',
          plugins: ['geo/DistrictExplorer']
        }
      }).then((AMap) => {
        // eslint-disable-next-line no-undef
        const districtExplorer = new AMapUI.DistrictExplorer()
        // 获取行政区域
        const getGeoJson = (adcode) => {
          return new Promise((resolve, reject) => {
            districtExplorer.loadAreaNode(adcode, function (error, areaNode) {
              if (error) {
                reject(error)
                return
              }
              let Json = areaNode.getSubFeatures()
              const mapJson = {
                type: 'FeatureCollection',
                features: []
              }
              if (Json.length === 0) {
                Json = drawMap.getJson.features.filter((item) => item.properties.adcode === adcode)
              }
              mapJson.features = Json
              resolve(mapJson)
            })
          })
        }
        // 获取数据
        const getChartData = (val) => {
          let data = []
          getGeoJson(val).then((res) => {
            data = res.features.map((e) => {
              return {
                adcode: e.properties.adcode,
                name: e.properties.name,
                value: (Math.random() * 100).toFixed(2)
              }
            })
            drawMap(res, data)
          })
        }
        // 挂载 方便外部调用
        this.init.getChartData = getChartData

        const drawMap = (map, data) => {
          drawMap.getJson = map
          echarts.registerMap('zyxh', map)
          this.option = {
            tooltip: {
              show: false,
              trigger: 'item',
              backgroundColor: 'rgba(255,255,255,0)',
              borderWidth: 0,
              enterable: true,
              padding: 0
            },
            geo: {
              center: undefined,
              zoom: 1,
              layoutCenter: ['50%', '50%'],
              layoutSize: '96%',
              map: 'zyxh',
              show: true,
              animationDurationUpdate: 0,
              label: {
                emphasis: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  areaColor: '#091632',
                  borderColor: '#1773c3',
                  shadowColor: '#1773c3',
                  shadowBlur: 20
                }
              }
            },
            series: [
              {
                center: undefined,
                zoom: 1,
                animationDurationUpdate: 0,
                roam: 'scale',
                layoutCenter: ['50%', '50%'],
                layoutSize: '96%',
                geoIndex: 1,
                name: '贵阳市',
                type: 'map',
                map: 'zyxh',
                label: {
                  show: true,
                  color: 'white',
                  fontSize: 10
                },
                itemStyle: {
                  normal: {
                    borderWidth: 2, // 边际线大小
                    borderColor: '#2576b4', // 边界线颜色
                    areaColor: '#113f7d' // 默认区域颜色
                  },
                  emphasis: {
                    show: true,
                    areaColor: '#3066ba', // 鼠标滑过区域颜色
                    label: {
                      show: true,
                      textStyle: {
                        color: '#fff'
                      }
                    }
                  }
                },
                data
              },
              {
                type: 'effectScatter',
                coordinateSystem: 'geo',
                showEffectOn: 'render',
                zlevel: 1,
                // roam: true,
                rippleEffect: {
                  period: 15,
                  scale: 4,
                  brushType: 'fill'
                },
                hoverAnimation: true,
                tooltip: {
                  show: false
                },
                label: {
                  normal: {
                    position: 'top',
                    offset: [15, 0],
                    color: '#1DE9B6',
                    show: true,
                    formatter: '{b}'
                  }
                },
                itemStyle: {
                  normal: {
                    color: '#1DE9B6',
                    shadowBlur: 20,
                    shadowColor: '#333'
                  }
                },
                symbolSize: 12,
                data: []
              }
            ]
          }
        }
        getChartData(520100)
        this.$refs.echarts.chart.on('click', (params) => {
          const {
            data: { name, adcode },
            componentSubType,
            seriesType
          } = params
          const areaArr = this.area
          let isTrue = false
          areaArr.forEach(item => {
            if (item.name === name) {
              isTrue = true
              this.updateArea(item.value)
            }
          })
          if (!isTrue) {
            this.$message.warning('很抱歉，暂时没有数据哦！')
          } else {
            if (componentSubType === 'map' && seriesType === 'map' && !this.isArea) {
              this.isArea = true
              getChartData(adcode)
            }
          }
        })
        this.$refs.echarts.chart.on('georoam', (params) => {
          const option = this.$refs.echarts.chart.getOption()
          if (params.zoom !== null && params.zoom !== undefined) {
            // 捕捉到缩放时
            option.geo[0].zoom = option.series[0].zoom // 下层geo的缩放等级跟着上层的geo一起改变
            option.geo[0].center = option.series[0].center // 下层的geo的中心位置随着上层geo一起改
          } else {
            // 捕捉到拖曳时
            option.geo[0].center = option.series[0].center // 下层的geo的中心位置随着上层geo一起改变
          }
          this.option = option
        })
      })
    },
    ininChart () {
      echarts.registerMap('gy', jsonData) // 生成矢量数据地图 第一个值(地图名称) 第二个值(geoJson格式的数据)
      this.myChartMap = echarts.init(document.getElementById('map')) // 初始化图表
      this.myChartMap.setOption(this.option) // 设置配置项和数据并显示图表
      let lastClick = ''
      // 鼠标点击事件
      this.myChartMap.on('click', param => {
        if (param.name === lastClick) {
          this.updateArea(0)
          lastClick = ''
        } else {
          this.updateArea(this.area.filter(item => item.name === param.name)[0].value)
          lastClick = param.name
        }
      })
    },
    updateArea (id) {
      this.$emit('updateAreaID', id)
    },
    handleChooseArea (title) {
      // this.isArea = true
      let isTrue = false
      this.area.forEach(item => {
        if (item.name === title) {
          this.updateArea(item.value)
          this.init.getChartData(520100)
          isTrue = true
        }
      })
      if (!isTrue) {
        this.$message.warning('很抱歉，暂时没有数据哦！')
      }
    },
    handleBack () {
      this.init.getChartData(520100)
      this.$emit('updateAreaID', 0)
      this.isArea = false
    }
  }
}
</script>
<style lang="less" scoped>
  .card {
    height: 100%;
    position: relative;
  }
  .button-group {
    position: absolute;
    right: 10px;
    bottom: 100px;
    width: 100px;
    .ant-btn {
      background-color: transparent;
      border-color: #1890ff;
      margin-bottom: 10px;
    }
  }
</style>
